<template>
  <div>
    <div class="banner">
      <h1>合作伙伴</h1>
    </div>
    <div class="cont">
      <p class="title">机构合作方案</p>
      <p class="subTitle">为您定制专业的机构合作方案，满足您的产品多样化需求</p>
      <p class="paragraph">UKDFX 机构合作方案是专门针对各类金融机构推出的高端高流动性的投资解决方案。</p>
      <p class="paragraph">我们利用尖端的科技实现顶级的风险控制，以协助机构合作者能够在较低风险的模式下实现稳定的盈利。</p>
      <p class="paragraph">我们与超过 50 家世界级投行深度合作，满足机构合作者流动性的需求。</p>
      <p class="paragraph">UKDFX 还为您准备了专业的机构合作顾问全程协助您的专属方案，满足您的全方位合作需求。</p>
      <p class="subTitle">我们的机构合作方案优势</p>
      <p class="paragraph indent">● 纯正 STP 模式，以互利共赢为合作目的超级点差</p>
      <p class="paragraph indent">● 完美交易条件</p>
      <p class="paragraph indent">● 尖端科技支持</p>
      <p class="paragraph indent">● 平台相关资源共享</p>
      <p class="subTitle">请填写下列表格并送出申请， 我们将尽快安排您洽谈。</p>
      <div class="excel">
        <div>
          <input type="text" :placeholder="holder.company" v-bind:readonly="isReadOnly">
        </div>
        <div>
          <input type="text" :placeholder="holder.name" v-bind:readonly="isReadOnly">
        </div>
        <div>
          <input type="text" :placeholder="holder.tel" v-bind:readonly="isReadOnly">
        </div>
        <div>
          <input type="text" :placeholder="holder.email" v-bind:readonly="isReadOnly">
        </div>
        <div class="textarea">
          <textarea name="" id="" cols="30" rows="10" maxlength="200" :placeholder="holder.msg" v-bind:readonly="isReadOnly"></textarea>
          <span>0/200</span>
        </div>
        <div class="btn">提交信息</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        holder: {
          company: "公司名称",
          name: "姓名",
          tel: "电话",
          email: "邮箱",
          msg: "留言"
        },
        isReadOnly: true
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import './../../common/stylus/mixin'
  .banner
    width: 100%
    height: 200px
    background: url("../../../static/images/banner.jpg") no-repeat
    background-size: 100% 100%
    padding-top:116.5px
    padding-left:40px
    box-sizing: border-box
    h1
      font-size: 20px
      color: #fff
  .cont
    padding: 0 18px
    p
      color: #333
      font-size: 14px
      text-align: justify
      &.title
        display: block
        font-size: 18px
        font-weight: bold
        color: #ff9c00
        margin-top: 20px
        margin-bottom: 10px
      &.subTitle
        font-size: 16px
        color: #333
        margin: 20px 0 20px 0
        font-weight: bold
      &.indent
        text-indent: 20px
      &.paragraph
        margin-top: 20px
      &.lastparagraph
        margin-bottom: 20px
    .excel
      > div
        width: 339px
        height: 44px
        line-height: 44px
        background-color #f5f5f5
        border-radius: 2.5px
        font-size: 14px
        color: #999
        padding-left: 11px
        margin-bottom: 15px
        box-sizing: border-box
        &:last-child
          margin-bottom: 20px
        &.btn
          width: 100%
          height: 44px
          line-height: 44px
          border-radius: 2.5px
          background-color: #ffcc00
          font-size: 12px
          font-family: "苹方"
          text-align: center
          color: #333
          margin-bottom: 25px
        &.textarea
          width:100%
          height: 120px
          position: relative
          > textarea
            width: 100%
            height: 100%
            outline:none
            border: none
            background-color: transparent
          > span
            font-size: 12px
            color: ddd
            position: absolute
            right: 11px
            bottom: 0
        input
          background-color: #f5f5f5
          width: 100%
          height: 100%
          outline:none
</style>
